<template>
    <!-- :style="{ height: `calc(100vh - ${statusBarHeight}rpx)` }" -->
	<view class="content" >
		<!-- 头部 -->
		<view class="header_content">
            <salesHeader @getKh="getKh">
                <template v-slot:right_btn>
                    <view class="header_top_right">
                        <button @click="handleAddHuohao" :plain="true" class="add_btn">
                            <text class="iconfont icon-jiahao"></text> 
                            <view>添加货号</view>
                        </button>
                    </view>
                </template>
            </salesHeader>

            <view class="header_bottom">
                <!-- <text class="iconfont icon-saoma"></text> -->
                <view class="easy_input">
                    <text class="iconfont icon-search"></text>
                    <input placeholder="请输入 搜索号/款号/款色编号" v-model="form.search" />
                    <button @click="handleSearch" hover-class="hover_search" >搜索</button>
                </view>
                <view  class="easy_select">
                    <uni-data-select
                        v-model="form.filtrate"
                        placeholder="默认排序"
                        :localdata="filtrList"
                        @change="changeSort"
                        ></uni-data-select>
                </view>
                <!-- <button @click="showDrawer" :plain="true" class="filter_btn">
                    <view>筛选</view>
                    <text class="iconfont icon-shaixuan"></text>
                </button> -->
            </view>
        </view>

        <!-- 内容 -->
        <view class="content_swiper">
            <!-- 侧边栏 -->
            <view class="sidebar_meun_content">
                <scroll-view style="height: 100%;" scroll-y="true">
                    <view class="meuns" :class="{active: item.active}" v-for="(item, index) in meunList" :key="index" @click="handleMeun(item)">
                       {{ item.name }}
                    </view>
                </scroll-view>
            </view>
            <!-- 主内容 -->
            <view class="content_right">
                <scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onScrolltolower">
                    <view>
                        <view class="custom_box">
                            <view class="custom_grid" v-for="(i, j) in shopList" :key="j">
                                <view class="grid_item_box" style="background-color: #fff;"  @click="goDetail(i)">
                                    <image style="width: 100%; height: 120rpx;" mode="scaleToFill" :src="i.hhImg" />

                                    <view class="grid_item_info">
                                        <view class="info_item">
                                            <view class="label">品名:</view>
                                            <view class="info_des_content">{{ i.pm }}</view>
                                        </view>

                                        <view class="info_item">
                                            <view class="label">货号:</view>
                                            <view class="info_des">{{ i.huohaoname }}</view>
                                        </view>

                                        <view class="info_item">
                                            <view class="label">库存:</view>
                                            <view class="info_des">{{ i.kcsl }}</view>
                                        </view>
                                    </view>

                                    <view class="info_item">
                                        <view class="label">价格:</view>
                                        <view class="info_des">￥ {{ i.xsprice }}</view>
                                        <text class="iconfont icon-gouwuche"></text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import salesHeader from "@/components/sales-header/sales-header.vue";
import utils from "@/utils/utils.js";
import Http from '@/service/api'
	export default {
		components: {
			customHeader,
            salesHeader,
		},
		data() {
			return {
                form: {},
                filtrList: [
                    { value: '默认排序', text: "默认排序" },
                    { value: '最新发布', text: "最新发布" },
                    { value: '价格高到低', text: "价格高到低" },
                    { value: '价格低到高', text: "价格低到高" },
                    { value: '库存数量', text: "库存数量" },
                ],
                meunList: [],
                shopList: [],
                page: 1,
                size: 21,
                huohaotype: '', // 货号编号
                showLower: false, // 是否触底加载更多
			}
		},
        computed: {
           
        },
		onLoad() {
            // for(let i=0; i<7; i++) {
            //     this.meunList.push({ name: `菜单--${i}`, active: false })
            // }
            // this.meunList[0].active = true
            // this.shopList = utils.splitArray(this.meunList, 3)
		},
        onShow() {
            this.GetBaseInfoList()
        },
		methods: {
            // 侧边栏获取基础数据
            GetBaseInfoList() {
                let param = { param: 'huohaotype' }
                Http.GetBaseInfoList(param).then(r => {
                    this.meunList = r.huohaotype.map(i => ({...i, active: false}))
                    this.meunList.unshift({ name: '所有类别', active: true, bh: '' })
                    this.getHuohaoPageList()
                    console.log('== meunList ', this.meunList)
                }).catch(err => {
                    console.log('== err ', err)
                })
            },
            changeSort(e) {
                this.showLower = false
                this.page = 1
                this.getHuohaoPageList()
            },
            // 获取商品数据
            getHuohaoPageList() {
                let param = {
                    page: this.page,
                    size: this.size,
                    search: this.form.search, 
                    huohaotype: this.huohaotype,
                    scheme: this.form.filtrate,
                }

                console.log('== param ', param)

                Http.getHuohaoPageList(param).then(r => {
                    console.log('== r 商品 -- ', r)
                    let data = r
                    if (!data.length && this.showLower) {
                        uni.showToast({
                            title:'数据加载完毕',
                            icon:'none',
                            duration:3000  
                        })
                        this.page--;
                        return
                    }
                    if (this.showLower) {
                        this.shopList = this.shopList.concat(data)
                    } else {
                        this.shopList = data
                    }
                }).catch(err => {
                    console.log('== err 11 ', err)
                })
            },
            // 加载更多
            onScrolltolower() {
                this.page++
                this.showLower = true
                console.log('== 加载跟多  ', this.page)
                this.getHuohaoPageList()
            },
            // 获取的客户信息
            getKh(item) {
                console.log('== item ', item)
            },
            handleAddHuohao() {
                uni.navigateTo({
					url: './addHuohao'
				})
            },
            handleSearch() {
                this.showLower = false
                this.page = 1
                this.getHuohaoPageList()
            },
            handleMeun(item) {
                this.meunList = this.meunList.map(i => ({...i, active: item.bh == i.bh }))
                this.huohaotype = item.bh
                this.showLower = false
                this.page = 1
                this.getHuohaoPageList()
            },

            goDetail(item) {
                console.log('== i ', item)
                uni.navigateTo({
					url: `./spDetail?huohaobh=${item.huohao}`
				})
            }
		}
	}
</script>

<style lang="less" scoped>
.content {
	height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 16rpx;

    .header_content {
        padding: 10rpx;

        .header_top {
            display: flex;
            align-items: center;

            .header_top_left {
                flex: 1;
                display: flex;
                align-items: center;

                .header_item {
                    display: flex;
                    align-items: center;
                }
            }
        }

        .header_top_right {
            .add_btn {
                display: flex;
                align-items: center;
                height: 45rpx;
                width: 120rpx;
            }

            .iconfont {
                font-size: 20rpx;
                margin-right: 5rpx
            }
        }


        .header_bottom {
            display: flex;
            align-items: center;
            background: #fff;
            margin-top: 10rpx;
            .iconfont {
                font-size: 35rpx;
                margin-right: 10rpx;
            }

            .easy_input {
                position: relative;
                flex: 1;
                display: flex;
                align-items: center;
                border: 1rpx solid #ccc;
                margin-right: 10rpx;
                input {
                    flex: 1;
                    padding: 10rpx;
                    padding-left: 50rpx;
                }

                button {
                    margin: 0;
                    border-left: 2rpx solid #ccc;
                    background: #ffac60;
                    color: #fff;
                    width: 120rpx;
                }
                .hover_search {
                    background: #d69150;
                }

                .iconfont {
                    position: absolute;
                    left: 15rpx;
                    font-size: 25rpx;
                }
            }

            .easy_select {
                width: 110rpx;
                margin-right: 10rpx;
                /deep/.uni-select {
                    height: 43rpx;
                    border: 1rpx solid #ccc;
                }
            }

            .filter_btn {
                display: flex;
                align-items: center;
                height: 43rpx;
                border: 1rpx solid #ccc;
                .iconfont {
                    font-size: 20rpx;
                    margin-left: 10rpx;
                }
            }
        }
    }

    .content_swiper {
        flex: 1;
        overflow: auto;
        display: flex;
        
        .sidebar_meun_content {
            width: 20%;
            background: #fff;
            padding-right: 5rpx;

            .meuns {
                padding: 10rpx 8rpx;
                white-space: nowrap;           /* 不换行 */
                overflow: hidden;              /* 隐藏超出的文本 */
                text-overflow: ellipsis;       /* 超出的部分显示省略号 */
            }

            .active {
                background: #ffac60;
                color: #fff;
                border-top-right-radius: 25rpx;
                border-bottom-right-radius: 25rpx;
                font-size: 17rpx;
            }
        }


        .content_right {
            flex: 1;
            overflow: hidden;

            // 
            .custom_box {
                display: flex;
                flex-wrap: wrap;
                overflow: hidden;
                background: #fff;

                .custom_grid {
                    width: 33%;
                    padding: 1rpx;
                    overflow: hidden;
                }
            }
            // 

            .grid_item_box {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                


                .grid_item_info {
                    flex: 1;
                    padding: 5rpx;
                }
                .info_item {
                    display: flex;
                    align-items: center;
                    padding-bottom: 5rpx;
                }

                .label {
                    white-space: nowrap;
                    color: #b6b6b6;
                }
                .info_des {
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .info_des_content {
                    flex: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3; /* 显示三行 */
                    overflow: hidden; /* 超出部分隐藏 */
                    text-overflow: ellipsis; /* 超出部分显示省略号 */
                }
                .iconfont {
                    font-size: 20rpx;
                    color: #ff8800;
                    padding-right: 15rpx;
                }

            } 
        }
    }
}
</style>
